import { useIntersectionObserver } from '@vueuse/core'
export default {
  install (app) {
    // 定义全局指令
    // 调用directive定义自定义指令
    // 第一个参数是自定义指令名字
    // 第二个参数是指令配置对象
    app.directive('imgLazy', {
      // 配置对象都是一个一个的钩子函数
      mounted (el, binding) {
        // 钩子函数的第一个参数是指令所在的哪个DOM元素
        // 第二个函数加.value是DOM元素上指令后面的那个内容
        // 组件懒加载逻辑
        const { stop } = useIntersectionObserver(
          // 要监听哪个节点
          el,
          // 如果节点滚动的距离进入视口那么isIntersecting为true
          ([{ isIntersecting }], observerElement) => {
            if (isIntersecting) {
              // 获取完数据后要停止监听这个组件,否则就以但滚动就会发送请求
              el.src = binding.value
              stop()
            }
          },
          // 刚进入视口区域就立刻执行回调 0 - 1
          { threshold: 0.1 }
        )
      }
    })
  }
}
